<template>
  <div v-if="visible" :class="['alert', `alert-${type}`]" role="alert">
    <div class="alert-content">
      <div v-if="showIcon" class="alert-icon">
        <span v-if="type === 'success'">✓</span>
        <span v-else-if="type === 'warning'">⚠</span>
        <span v-else-if="type === 'error'">✗</span>
        <span v-else-if="type === 'info'">ℹ</span>
      </div>
      <div class="alert-message">
        <div class="alert-title" v-if="title">{{ title }}</div>
        <div class="alert-description" v-if="description">{{ description }}</div>
      </div>
      <div v-if="closable" class="alert-close" @click="close">
        ×
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  props: {
    type: {
      type: String,
      default: 'info',
      validator: function (value) {
        return ['success', 'warning', 'error', 'info'].indexOf(value) !== -1
      }
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    closable: {
      type: Boolean,
      default: true
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    modelValue: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: this.modelValue
    }
  },
  watch: {
    modelValue(newVal) {
      this.visible = newVal
    }
  },
  methods: {
    close() {
      this.visible = false
      this.$emit('update:modelValue', false)
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.alert {
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: relative;
  transition: opacity 0.3s;
}

.alert-content {
  display: flex;
  align-items: flex-start;
}

.alert-icon {
  font-size: 16px;
  margin-right: 10px;
  line-height: 1.5;
}

.alert-message {
  flex: 1;
  line-height: 1.5;
}

.alert-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.alert-description {
  font-size: 14px;
}

.alert-close {
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  margin-left: 16px;
  padding: 0;
  background: none;
  border: none;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.alert-close:hover {
  opacity: 1;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-success .alert-icon {
  color: #28a745;
}

.alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.alert-warning .alert-icon {
  color: #ffc107;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.alert-error .alert-icon {
  color: #dc3545;
}

.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.alert-info .alert-icon {
  color: #17a2b8;
}
</style>